<template>
  <div class="alone-outBox f14">
    <div class="tableBox" style="padding-top: 10px; padding-bottom: 0px">
      <el-tabs v-model="chouseOne" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="专属定制会" name="1"></el-tab-pane>
        <el-tab-pane label="高级专属定制会" name="4"></el-tab-pane>
        <el-tab-pane label="厂商会" name="2"></el-tab-pane>
        <el-tab-pane label="自助办会" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 表格 -->
    <div class="pd16">
      <el-table v-loading="loading" :data="DataTable" style="width: 100%">
        <el-table-column prop="title" label="名称" min-width="350" align="left">
          <template slot-scope="scope">
            <div class="flex">
              <div class="mr20">
              <img :src="scope.row.imgUrl" width="104" height="69"
                />
              </div>
              <div>
                <div>
                  <el-link
                    type="primary"
                    >{{ scope.row.title }}</el-link
                  >
                </div>
                <div class="mt20">
                  <span style="color: #4f5862">
                    {{ scope.row.starttime }}--{{ scope.row.videoenddate2 }}
                  </span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="admin"
          label="创建人"
          min-width="100"
          align="left"
        >
        </el-table-column>
        <el-table-column prop="createTime" label="保存时间" min-width="100" align="left">
   
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          min-width="120"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="text" class="pr10" @click="editDrafts(scope.row)">编辑</el-button>
            <el-button type="text" @click="deletenotes(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="alignRight">
      <Pagination
        :total="total"
        :page="searchObj.page"
        :limit="searchObj.limit"
        @pagination="paginations"
      />
    </div>
  </div>
</template>
  <script>
import Pagination from "@/components/Pagination/index.vue";
import Cookies from "js-cookie";
import indexapi from "@/api/index";
import { changeDateFormat } from "@/utils/commin";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      chouseOne:'0',
      searchObj: {
        limit: 10,
        page: 1,
        meettype:''
      },
      total: 0,
      DataTable: [],
      loading: false,
    };
  },
  mounted() {
    this.SearchList();
  },
  methods: {
    handleClick(tab, event) {
      this.SearchList();
      },
    editDrafts(val){
      if (val.meettype==1||val.meettype==4) {
        this.$router.push({ path: "/custoMade/step", query: { id: val.id,meetType:val.meettype } })
      }else if(val.meettype==3){
        this.$router.push({ path: "/selfCreate/step1", query: { id: val.id,meetType:val.meettype } })
      }else{
        this.$router.push({ path: "/custoMade/step1", query: { id: val.id,meetType:val.meettype } })
      }
    },
    getMeetingList(val) {
      this.$router.push({
        path: "/support/meetingList",
        query: { mid: val.subject_mid, time: val.videoenddate },
      });
    },
    submitBG(val) {
      // 1 12
      this.$router.push({
        path: "/support/report",
        query: { reportMid: val.report_mid, id: val.id },
      });
    },
    checkInfo(val) {
      //0 赞助审核中 2 赞助审核驳回 10 报告审核中 11 报告审核通过
      if (val.state == 0 || val.state == 2) {
        this.$router.push({
          path: "/support/apply",
          query: { mid: val.mid, id: val.id },
        });
      } else {
        this.$router.push({
          path: "/support/report",
          query: { reportMid: val.report_mid, id: val.id, examine: 1 },
        });
      }
    },
    deletenotes(val) {
      this.$confirm("删除记录后，将无法找回，请谨慎操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let form = {
            id: val.id,
            imshowId: this.searchObj.imshowId,
          };
          indexapi.selfMeting.deleteMeetingDraftById(form).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.SearchListBt();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 查询
    SearchListBt() {
      this.searchObj.limit = 10;
      this.searchObj.page = 1;
      this.SearchList();
    },

    SearchList() {
      this.loading = true;
      this.searchObj.imshowId = this.$store.getters.imShowId
      if (this.chouseOne!='0') {
         this.searchObj.meettype=this.chouseOne
      }else{
        this.searchObj.meettype=''
      }
      indexapi.selfMeting.getMeetingDraft(this.searchObj).then((res) => {
        this.loading = false;
        this.DataTable = res.data.records;
        this.DataTable.forEach((item) => {
          item.starttime = changeDateFormat(item.starttime);
          item.videoenddate2 = changeDateFormat(item.videoEndDate);
          item.subject_starttime = changeDateFormat(item.subject_starttime);
          item.report_videoenddate = changeDateFormat(item.report_videoenddate);
          item.subject_videoenddate = changeDateFormat(
            item.subject_videoenddate
          );
        });
        this.total = res.data.total;
      });
    },
    // 分页
    paginations(val) {
      this.searchObj.limit = val.limit;
      this.searchObj.page = val.page;
      this.SearchList();
    },
    releaseInformation() {
      this.$router.push(`/content/solutionscheme/solution/addoredit`);
    },
  },
};
</script>
  <style lang="scss" scoped>
.pd16 {
  padding: 6px 16px 16px;
  background: #fff;
}
.mb18 {
  margin-bottom: 16px;
}
.sh_body {
  display: inline-block;
  font-size: 14px;
  color: #0c7ff2;
  line-height: 16px;
  padding: 4px 10px;
  background: #e7f2fe;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #0c7ff2;
}
.tg_body {
  display: inline-block;
  font-size: 14px;
  color: #00be1e;
  line-height: 16px;
  padding: 4px 10px;
  background: #e5f9e9;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #00be1e;
}
.bh_body {
  display: inline-block;
  font-size: 14px;
  color: #ff6332;
  line-height: 16px;
  padding: 4px 10px;
  background: #ffefeb;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #ff6332;
}
.cx_body {
  display: inline-block;
  font-size: 14px;
  color: #7e8790;
  line-height: 16px;
  padding: 4px 10px;
  background: #f5f7fa;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #e5eaf0;
}
.topButton {
  position: absolute;
  right: 20px;
  top: 16px;
}
.flex_bt {
  justify-content: space-between;
}
.icon_right {
  font-weight: 600;
  color: #0c7ff2;
  cursor: pointer;
  font-size: 18px;
}
.staffinfo {
  width: 100%;
  padding: 16px 16px 0 16px;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
  background-color: #ffffff;
  .staff-nav {
    width: 100%;
    @include flex(row, center, space-between);
    .nav-option {
      @include flex(row, center, flex-start);
      i {
        font-size: 14px;
        color: #4f5862;
        margin-right: 10px;
      }
      .option-name {
        color: #202933;
        font-size: 14px;
        margin-right: 20px;
      }
      .option-progress {
        @include flex(row, center, center);
        margin-right: 20px;
        .progress-num {
          font-size: 14px;
          color: #202933;
        }
      }
      ::v-deep .el-progress {
        width: 300px;
        margin-right: 20px;
        .el-progress-bar {
          border-radius: 0;
          .el-progress-bar__outer {
            border-radius: 0;
            .el-progress-bar__inner {
              border-radius: 0;
            }
          }
        }
      }
    }
  }
}
.pr10 {
  padding-right: 10px;
}
</style>
  